$(function () {
    //1-获取地址栏商品的关键字，搜索对应的内容，并渲染
    var key = getData('key');
    // console.log(key);
    // 搜索框信息同步
    $('.search_input').val(key);

    

    mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        indicators: false, //是否显示滚动条
    });



    // 搜索记录更新
    var arr = JSON.parse(localStorage.getItem('search')) || [];
    //在添加之前先判断数组中是否有重复向，如果有先删除，在添加
    var index = arr.indexOf(key);
    if(index != -1) {
        //删除重复项
        arr.splice(index, 1);
    }
    // 在数组最前面添加数据
    arr.unshift(key);
    // 数组的长度大于8 ，删除最后一条
    if(arr.length > 8) {
        arr.pop();
    }
    // 重新存储到localStorage中
    localStorage.setItem('search', JSON.stringify(arr));



    //存放商品的相关参数
    var obj = {
        proName: key,
        page: 1,
        pageSize: 10,
    };


    //2-根据关键字去数据库中查找对应的数据，并渲染 
    render();
    function render() {

        $('.lt_product').html('<div class="loading"></div>');

        setTimeout(function () {
            $.ajax({
                url: '/product/queryProduct',
                data: obj,
                dataType: 'json',
                success: function (info) {
                    // console.log(info);
                    // 渲染数据
                    $('.lt_product').html(template('tpl', info));
                }
            })
        }, 1000);
    }





    //3-点击搜索按钮，
    // 获取输入框的关键字，
    // 将关键字添加到历史记录中，
    // 并且搜索对应商品，并渲染

    $('.search_btn').on('click', function () {
        var val = $('.search_input').val();
        obj.proName = val;
        // 获取localStorage数据，转成数组，进行添加
        var arr = JSON.parse(localStorage.getItem('search')) || [];

        // 先删除数组中重复项
        var index = arr.indexOf(val);
        if (index != -1) {
            arr.splice(index, 1);
        }

        //向数组中前面添加
        arr.unshift(val);

        // 历史记录值存储最近8条
        if (arr.length > 8) {
            arr.pop();
        }

        //将修改后的记录存储会lcoalStorage 
        localStorage.setItem('search', JSON.stringify(arr));

        // 重新渲染
        render();
    })


    //4-点击价格 和库存按钮，对商品进行 排序
    // 1-点击a标签，自己高亮，排他  current 类名
    // 2-点击a标签，切换箭头的方向 fa-angle-up fa-angled-down
    $('.lt_sort a').on('click', function () {
        $(this).addClass('current').siblings().removeClass('current');
        $(this).children().toggleClass("fa-angle-down").toggleClass("fa-angle-up");

        var str = $(this).data('type');

        if (str == 'price') {
            obj.num = '';
            var price = $(this).children().hasClass('fa-angle-up') ? 1 : 2;
            // 对商品进行 排序
            obj.price = price;
            render();
        } else {
            obj.price = '';
            var num = $(this).children().hasClass('fa-angle-up') ? 1 : 2;
            obj.num = num;
            render();
        }
        console.log(obj);
    })





})